<template>
    <div class="header-nav-container">
        <div class="header-nav-left"></div>
        <div class="header-nav-right">
            <div class="header-nav-right-item" v-for="item in HEADER_NAV_MENU">
                <span>{{ item.label }}</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { HEADER_NAV_MENU } from '../../assets/constant/project.ts';
</script>

<style lang="scss" scoped>
.header-nav-container {
    --header-nav-height: 64px;
    --header-nav-shadow: 0 2px 8px var(--color-gray-3);

    --header-nav-right-item-width: 64px;
    --header-nav-right-item-padding-horizontal: 12px;
    --header-nav-right-item-color-active: var(--color-blue-6);

    @include flex.display-flex;
    width: 100%;
    height: var(--header-nav-height);
    box-shadow: var(--header-nav-shadow);
    box-sizing: border-box;

    .header-nav-left {
        @include flex.flex(1);
        width: 275px;
        height: 100%;
    }

    .header-nav-right {
        @include flex.display-flex;
        @include flex.flex(5);
        align-items: center;
        justify-content: flex-end;
        height: 100%;

        .header-nav-right-item {
            @include flex.display-flex;
            align-items: center;
            justify-content: center;
            position: relative;
            width: var(--header-nav-right-item-width);
            height: 100%;
            padding: 0 var(--header-nav-right-item-padding-horizontal);
            box-sizing: border-box;
            cursor: pointer;

            &:hover,
            &.hover,
            &:focus,
            &.hover {
                color: var(--header-nav-right-item-color-active);

                &::before {
                    position: absolute;
                    width: calc(100% - 2 * var(--header-nav-right-item-padding-horizontal));
                    height: 2px;
                    top: 0;
                    left: var(--header-nav-right-item-padding-horizontal);
                    background-color: var(--header-nav-right-item-color-active);
                    content: '';
                }
            }
        }
    }
}
</style>
